<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="vendors/msui/css/msui.css" />
  <link rel="stylesheet" href="assets/css/main.css">
  <link rel="stylesheet" href="assets/css/app-nav.css">
  <link rel="stylesheet" href="assets/css/system-watch.css">
  <link rel="stylesheet" href="vendors/BeatPicker/css/BeatPicker.min.css">

  <script type="text/javascript" src="vendors/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="vendors/msui/js/msui.min.js"></script>
  <script type="text/javascript" src="vendors/echarts.js"></script>
  <script type="text/javascript" src="assets/js/app-nav.js"></script>
  <script type="text/javascript" src="assets/js/system-watch.js"></script>
  <script type="text/javascript" src="vendors/BeatPicker/js/BeatPicker.min.js"></script>
  <script type="text/javascript" src="vendors/BeatPicker/js/jquery-1.11.0.min.js"></script>
  <script src="vendors/Highcharts-6.0.3/code/highstock.js"></script>
  <script src="vendors/Highcharts-6.0.3/code/highcharts-more.js"></script>
  <script src="vendors/Highcharts-6.0.3/code/modules/exporting.js"></script>
  <script src="vendors/Highcharts-6.0.3/code/modules/export-data.js"></script>
  <script src="vendors/Highcharts-6.0.3/code/modules/solid-gauge.js"></script>
  <script src="vendors/Highcharts-6.0.3/code/modules/drilldown.js"></script>

</head>

<body>
    <div class="app-nav"></div>
    <div class="app-wrapper">
        <div class="ms-g">
            <p class="real">分系统能耗概览</p>
            <hr>
            <div class="ms-u-sm-12 ms-u-md-12 ms-u-lg-4">
                <div class="panel1 ">
                    <p class="label">照明系统今日能耗(KW*H)</p>
                    <p class="number"> 888.8 <span></span> </p>
                </div>
            </div>

            <div class="ms-u-sm-12 ms-u-md-12 ms-u-lg-4" >
                <div class="panel2">
                    <p class="label"> 空调系统今日能耗(KW*H)</p>
                    <p class="number"> 888.8 <span></span> </p>
                </div>
            </div>

            <div class="ms-u-sm-12 ms-u-md-12 ms-u-lg-4" >
                <div class="panel3">
                    <p class="label"> 电梯系统今日能耗(KW*H)</p>
                    <p class="number"> 588.8 <span></span> </p>
                </div>
            </div>
        </div>

        <br>
        <br>
        <div class="ms-g">
            <div class="ms-u-sm-12">
                <p class="title">实时能耗</p>
                <hr>
                <div id="main"></div>
            </div>
        </div>
        <br>

        <div class="ms-g">
            <div class="ms-u-sm-6" >
                <p class="title">今日用电总量各系统分布</p>
                <hr>
                <br>
                <div id="sys-distribution"></div>
            </div>
            <div class="ms-u-sm-6">
                <p class="title">今日各系统用电各区域分布</p>
                <hr>
                <div class="ms-tabs" data-ms-tabs >
                    <ul class="ms-tabs-nav ms-nav ms-nav-tabs">
                        <li class="ms-active"><a href="#lighting">照明系统</a></li>
                        <li><a href="#air">空调系统</a></li>
                        <li><a href="#elevator">电梯系统</a></li>
                    </ul>

                    <div class="ms-tabs-bd ms-tabs-bd-ofv" >
                        <div class="ms-tab-panel ms-fade ms-in ms-active" id="lighting">
                            <div id="sys-lighting"></div>
                        </div>
                    </div>

                    <div class="ms-tabs-bd ms-tabs-bd-ofv">
                        <div class="ms-tab-panel ms-fade" id="air">
                            <div id="sys-air"></div>
                        </div>
                    </div>

                    <div class="ms-tabs-bd ms-tabs-bd-ofv">
                      <div class="ms-tab-panel ms-fade" id="elevator">
                          <div id="sys-elevator"></div>
                      </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ms-g">
            <div class="ms-u-sm-12">
                <p class="title">分系统区域用电一览</p>

                <p class="sys-choose">选择区域：
                    <select id="area" onchange="onAreaSelect()">
                        <option value="all">All</option>
                    </select>
                    选择建筑 ：
                    <select id="building" onchange="onBuildingSelect()">
                        <option value="a">---</option>
                    </select>
                    选择楼层 ：
                    <select id="floor" onchange="onFloorSelect()">
                        <option value="a">---</option>
                    </select>
                    选择房间 ：
                    <select id="room" >
                        <option value="a">---</option>
                    </select>                
                    <button type="button" class="ms-btn ms-btn-primary">查询</button>
                </p>
            </div>
        </div>
        <div class="ms-g">
            <div class="ms-u-sm-12 ms-u-md-6 ms-u-lg-3">
                <div id="region-A">
                    <p class="table-head">A</p>
                    <div class="detail">
                        <table >
                            <tbody>
                                <tr>
                                    <td>照明</td>
                                    <td>3562</td>
                                </tr>
                                <tr>
                                    <td>空调</td>
                                    <td>3562</td>
                                </tr>
                                <tr>
                                    <td>电梯</td>
                                    <td>3562</td>
                                </tr>
                            </tbody>
    
                        </table>
                    </div>
                </div>
            </div>
            <div class="ms-u-sm-12 ms-u-md-6 ms-u-lg-3">
                <div id="region-B">
                    <p class="table-head">B</p>
                    <div class="detail">
                        <table>
                            <tbody>
                                <tr>
                                    <td>照明</td>
                                    <td>3562</td>
                                </tr>
                                <tr>
                                    <td>空调</td>
                                    <td>3562</td>
                                </tr>
                                <tr>
                                    <td>电梯</td>
                                    <td>3562</td>
                                </tr>
                            </tbody>
                          </table>
                    </div>
                </div>
            </div>
            <div class="ms-u-sm-12 ms-u-md-6 ms-u-lg-3">
                <div id="region-C">
                    <p class="table-head">C</p>
                    <div class="detail">
                        <table>
                            <tbody>
                            <tr>
                                <td >照明</td>
                                <td >3562</td>
                            </tr>
                            <tr>
                                <td>空调</td>
                                <td>3562</td>
                            </tr>
                            <tr>
                                <td>电梯</td>
                                <td>3562</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>                   
                </div>
            </div>
            <div class="ms-u-sm-12 ms-u-md-6 ms-u-lg-3">
                <div id="region-D">
                    <p class="table-head">D</p>
                    <div class="detail">
                        <table>
                            <tbody>
                            <tr>
                                <td>照明</td>
                                <td>3562.55</td>
                            </tr>
                            <tr>
                                <td>空调</td>
                                <td>3562</td>
                            </tr>
                            <tr>
                                <td>电梯</td>
                                <td>3562</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <br>
    </div>
</body>

</html>